/*
 * carousel 기본 기능 테스트하기.
 *  - direction : horizontal, vertial
 *  - indicator : 점으로 나온 메뉴 출력여부.
 *  - prev(),next(),setActiveItem() 메소드
*/
Ext.setup({
	tabletStartupScreen:"./tabletStartupScreen.png",
	phoneStartupScreen:"./phoneStartupScreen.png",
	tabletIcon:"./tabletIcon.png",
	phoneIcon:"./phoneIcon.png",
	glossOnIcon: true,
	statusBarStyle:"black",
	fullscreen:true,
	preloadImages:[],
	scope:this,
	onReady: function() {
		function on_Prev() {
			var sel1 = Ext.getCmp("carousel1");
			sel1.prev();   
		}
      	function on_Next() {
      		var sel1 = Ext.getCmp("carousel1");
      		sel1.next();
      	}
      	function on_Up() {
			var sel1 = Ext.getCmp("carousel2");
			sel1.prev();   
		}
      	function on_Down() {
      		var sel1 = Ext.getCmp("carousel2");
      		sel1.next();
      	}
      	var dockedItems = [{
      		dock : 'top',
      		xtype: 'toolbar',
      		title: 'Carousel Sample 1'
      	}];
      	// 버튼그룹 1
      	var buttonsGroup1 = [{
      		xtype: 'toolbar',
      		dock : 'top',
      		items:[
      		       {text: 'Prev', ui: 'back', handler: on_Prev }, 
      		       {text: 'Next', ui: 'forward', handler: on_Next},
      		       {text: 'Up', ui: 'back', handler: on_Up},
      		       {text: 'Down', ui: 'forward', handler: on_Down},
      		       ]
      	}];
      	new Ext.Panel({
      		fullscreen: true,  
      		id: "toolbartxt",
      		scroll: "vertical",
      		layout: {
      			type: 'vbox',
      			align: 'stretch'
      		},
      		defaults: {
      			flex: 1
      		},
      		dockedItems:dockedItems.concat(buttonsGroup1),
      		items: [{
      			xtype: 'carousel',
      			id:"carousel1",
      			items: [{
      				html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
      				cls: 'card card1'
      			}, {
      				html: '<p>Clicking on either side of the indicators below</p>',
      				cls: 'card card2'
      			}, {
      				html: 'Card #3',
      				cls: 'card card3'
      			}]
      		}, {
      			xtype: 'carousel',
      			direction: 'vertical',
      			id:"carousel2",
      			items: [{
      				html: '<p>Carousels can be vertical and given a <code>ui</code> of &#8216;light&#8217; or &#8216;dark.&#8217;</p>',
      				cls: 'card card4'
      			}, {
      				html: 'Card #2',
      				cls: 'card card5'
      			}, {
      				html: 'Card #3',
      				cls: 'card card6'
      			}]
      		}]
      	})
	}
});